<template>
    <div v-if="props.data.parentId == props.parent" style="margin-top: 1%;">
        <div style="display: flex; width: 800px  ;">
            <el-avatar :size="50" :src="props.data.userDetails.url" @click="PushUserPage" style="cursor: pointer;" />
            <div style=" display: flex;flex-direction: column;width: 600px;">
                <div style="display: flex;">
                    <el-text class="mx-1" @click="PushUserPage" style="cursor: pointer;color: blue">{{
                        props.data.userDetails.acName }}</el-text>
                    <div style="margin-left: 2%;">
                        <el-text class="mx-1">{{ props.data.createTime }}</el-text>
                    </div>
                </div>
                <div style="display: flex;flex-direction: row;">
                    <el-text class="mx-1" style="align-self:auto;cursor: pointer;color: blue" @click="PushUserPage"
                        v-if="props.data.parentId !== props.data.replyId">@{{
                            props.data.replyDetails.acName }}：</el-text>
                    <el-text class="mx-1" style="align-self:auto">{{ props.data.content }}</el-text>
                </div>

            </div>
            <div style="display: flex;align-items: center;">
                <el-button type="primary" @click="dialogAddVisible = true">回复</el-button>

                <el-dialog v-model="dialogAddVisible" title="回复评论" width="500">
                    <el-input v-model="reply" style="width: 360px" placeholder="Please input" />
                    <el-button type="primary" @click="AddReply" style="margin-left: 10%;">回复</el-button>
                </el-dialog>

                <el-button type="primary" @click="dialogDeleteVisible = true" style="margin-left: 10%;"
                    v-if="props.data.userDetails.id == userId">删除</el-button>
                <el-dialog v-model="dialogDeleteVisible" title="删除评论" width="500">
                    <el-button type="primary" @click="DeleteReply">确定删除</el-button>
                </el-dialog>
            </div>
        </div>

        <div style="margin-left: 5%;">
            <Comments v-for="item in props.data.childComment" :key="item.id" :data="item" :parent="props.data.id"
                :reply-details="item.replyDetails" :getComments="props.getComments" />
        </div>

    </div>
</template>

<script setup>
import Comments from '@/components/Comments.vue';
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'; // 引入路由
import { IsLoginIn } from '@/components/functions/IsLoginIn.vue';
import { useRouter } from 'vue-router'; // 引入路由

const router = useRouter();

const route = useRoute();

const dialogAddVisible = ref(false)
const dialogDeleteVisible = ref(false)
const reply = ref([]);
const userId = ref();

const props = defineProps({
    data: {
        type: Object,
        default: () => ({
            id: '-1',
            content: '',
            blogId: '-1',
            parentId: '-1',
            replyId: '-1',
            createTime: '2024-07-12 14:44:53',
            userDetails: {
                id: '-1',
                acName: '默认名称',
                url: ''
            },
            childComment: [],
        })
    },
    replyDetails: {
        type: Object,
        default: () => ({
            id: '-1',
            acName: '-1',
        })
    },
    parent: {
        type: Number,
        default: "0" // 这里为 parent 提供了一个默认值 0
    },
    getComments: {
        type: Function,
        default: null
    }
});

const parent_id = ref(props.data.parentId);

if (parent_id.value == 0) {
    parent_id.value = props.data.id;
}

function PushUserPage() {
    // console.log(props.data);
    router.push({ path: '/user', query: { id: props.data.userDetails.id } });
}

function AddReply() {
    IsLoginIn();

    axios
        .post('/api/comment/reply', {
            content: reply.value,
            blog_id: props.data.blogId,
            parent_id: parent_id.value,
            reply_id: props.data.id

        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            console.log(localStorage.getItem('userToken'));
            props.getComments();

            reply.value = null;
            dialogAddVisible.value = false;

            // blogData = response.data.data.content;
            // console.log(blogData);
            // vditor.setValue(blogData);
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

function DeleteReply() {
    IsLoginIn();

    axios
        .post('/api/comment/del', {
            id: props.data.id,
        }, {
            headers: {
                'HOSHINO_T_KK': localStorage.getItem('userToken'),
            }
        })
        .then(response => {
            console.log(response);
            console.log(localStorage.getItem('userToken'));
            props.getComments();
            // blogData = response.data.data.content;
            // console.log(blogData);
            // vditor.setValue(blogData);
        })
        .catch(function (error) { // 请求失败处理
            console.log(error);
        });
}

onMounted(() => {
    userId.value = localStorage.getItem('userId');
})
</script>